<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useNav } from "@/layout/hooks/useNav";
const { username, logout } = useNav();
import { getRules, ie } from "@/api/ie";
import { ElMessage } from "element-plus";
import { renderAsync } from "docx-preview";
import docx from "@/views/ie/components/docs.vue";

//我是vue3项目 报错require不行 就用的下边这种了
// let docx = import.meta.glob("docx-preview");

const textarea = ref("");
const tableData = ref([]);
const tableRef = ref();

onMounted(() => {
  getRules({ username: username.value })
    .then(res => {
      if (res["code"] != 0) {
        ElMessage({
          type: "error",
          message: res["detail"]
        });
        return;
      }
      tableData.value = res["rules"];
    })
    .catch(error => {
      console.log(error);
      if (error.response.status == 401) {
        ElMessage({
          type: "error",
          message: "登录过期"
        });
        logout();
      }
    });
});

const showDetailDialog = ref(false);
const detailData = ref([]);
const showDetail = index => {
  console.log(index);
  detailData.value = [];
  console.log(tableData.value[index]["rule"]);
  detailData.value = tableData.value[index]["rule"];
  showDetailDialog.value = true;
};

const submit = () => {
  const selected = tableRef.value.getSelectionRows();
  console.log(selected);
  if (selected.length == 0) {
    ElMessage({
      type: "error",
      message: "请至少选择一条规则"
    });
    return;
  }
  ie({ username: username.value, text: textarea.value, rules: selected })
    .then(res => {
      if (res["code"] != 0) {
        ElMessage({
          type: "error",
          message: res["detail"]
        });
        return;
      }
      ElMessage({
        type: "success",
        message: "抽取完成"
      });
    })
    .catch(error => {
      console.log(error);
      if (error.response?.status == 401) {
        ElMessage({
          type: "error",
          message: "登录过期"
        });
        logout();
      }
    });
};

const inp = ref();

const onGetFile = () => {
  console.log(inp);
  var file = inp.value.files[0];

  var options = { inWrapper: false, ignoreWidth: true, ignoreHeight: true }; // https://github.com/VolodymyrBaydalka/docxjs#api
  renderAsync(file, document.getElementById("container"), null, options).then(
    x => console.log("docx: finished")
  );
};
</script>

<template>
  <div>
    <h3 class="m-4">请输入要抽取的文本</h3>
    <el-input
      v-model="textarea"
      style="width: 100%"
      autosize
      type="textarea"
      placeholder="请输入要抽取的文本"
    />
    <h3 class="m-4">请选择要使用的规则</h3>
    <el-table ref="tableRef" :data="tableData" max-height="350">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="规则id" />
      <el-table-column prop="title" label="规则标题" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="showDetail(scope.$index)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="showDetailDialog" title="详细信息" width="500">
      <el-table :data="detailData" max-height="350">
        <el-table-column prop="info" label="抽取的信息" />
        <el-table-column prop="description" label="内容描述" />
      </el-table>
    </el-dialog>
    <el-button
      style="margin-top: 10px; width: 100%"
      type="success"
      @click="submit"
      plain
      >上传至后台进行抽取</el-button
    >
    <docx></docx>
    <!-- <input
      ref="inp"
      id="document"
      type="file"
      :onchange="onGetFile"
      accept=".docx"
    />
    <br />
    <div id="container"></div> -->
  </div>
</template>
